<template>
  <div class="goods-container">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar van-hairline--bottom"
      left-text="小狐首页"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /导航栏 -->

    <!-- 输入框 -->
    <van-search
    v-model="value"
    shape="round"
    background="#fff"
    placeholder="搜索您想要的商品"
  />
    <!-- /输入框 -->

    <!-- 分类选择器 -->
    <van-tree-select height="84.6vh" :items="items" :main-active-index.sync="active">
      <template #content>
        <goods-list v-if="active === 0"></goods-list>
        <goods-list v-if="active === 1"></goods-list>
        <goods-list v-if="active === 2"></goods-list>
      </template>
    </van-tree-select>
    <!-- /分类选择器 -->
  </div>
</template>

<script>
import GoodsList from './components/goods-list'

export default {
  name: 'Goods',
  components: { GoodsList },
  props: {},
  data () {
    return {
      active: 0, // 分类选择器的激活索引
      items: [{ text: '秋冬滋补' }, { text: '水果区' }, { text: '蔬菜区' }, { text: '家禽区' }, { text: '水产区' }, { text: '肉类区' }, { text: '蛋类区' }, { text: '豆制品' }, { text: '调味品' }, { text: '小狐新品' }, { text: '小狐精选' }, { text: '鲜奶乳品' }, { text: '休闲食品' }], // 分类选择器的选择项列表
      value: '' // 输入框
      // itemLength: this.items.length// 选项长度
    }
  },
  created () {

  },
  mounted () {

  },
  watch: {},
  computed: {},
  methods: {

  }
}
</script>

<style scoped lang="less">
.goods-container{
  /* 导航栏 */
  /deep/.page-nav-bar{
    background-color: #fff;
    .van-nav-bar__text{
      color: #2c2c2c;
    }
    .van-icon{
      color:#2c2c2c;
    }
  }
  /* /导航栏 */

  /* 分类选择器 */
  /deep/.van-tree-select{
    .van-sidebar{
      background-color: #f0f3f5;
    }
  }
  /* /分类选择器 */
}
</style>
